<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="./ext/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./highcharts/highcharts.js"></script>
<script type="text/javascript" src="./highcharts/exporting.js"></script>
<script type="text/javascript" src="./highcharts/themes/gray.js"></script>
<script type="text/javascript" src="./js_src/statisticcharts.js"></script>
<title>每日新增用户查询</title>
</head>
<body>
	<div id="tool_bar"
		style="margin-left: 100px; height: 180px; width: 90%; margin-right: 100px; margin-top: 20px"></div>
	<div id="new_register_user"
		style="width: 90%; margin-left: 100px; height: 700px; margin-right: 100px; margin-top: 20px"></div>
</body>
<script>
	var mWindow = Ext.create('Ext.panel.Panel', {
		title : "每日新增用户查询",
		region : "center",
		bodyStyle : 'padding:6px 0px 0px 15px',
		width : Ext.get("tool_bar").getWidth(),
		height : Ext.get("tool_bar").getHeight(),
		items : [ {
			xtype : 'datefield',
			fieldLabel : '开始日期',
			name : 'begin_date',
			id : 'begin_date',
			anchor : '100%',
			format : 'Y-m-d',
			maxValue : new Date(),
			value : new Date(),
			padding : '10 5 3 10',
			width : 200,
			labelWidth : 60,
			height : 20,
			style : "margin-left:20px",
		}, {
			xtype : 'datefield',
			fieldLabel : '结束日期',
			name : 'end_date',
			id : 'end_date',
			anchor : '100%',
			format : 'Y-m-d',
			maxValue : new Date(),
			value : new Date(),
			padding : '10 5 3 10',
			width : 200,
			labelWidth : 60,
			height : 20,
			style : "margin-left:20px",
		}, {
			xtype : 'button',
			style : "margin-left:20px",
			text : '查询',
			handler : function() {
				var begin = Ext.getCmp('begin_date').getValue();
				var end = Ext.getCmp('end_date').getValue();
				if (begin > end) {
					alert("开始日期不能大于截止日期");
					return;
				}
				begin = Ext.Date.format(new Date(begin), 'Y-m-d');
				end = Ext.Date.format(new Date(end), 'Y-m-d');

				Ext.Ajax.request({
					url : 'userstatistics',
					params : {
						adminOpt : 'registerQuantity',
						beginDate : begin,
						endDate : end
					},
					success : function(response) {
						var result = response.responseText;

						var series = [];
						var categories = [];
						var data = [];
						result = Ext.decode(result);
						console.info(result);
						$.each(result, function(name, value) {
							categories.push(name);
							data.push(parseInt(value));
						});
						var objBar = {
							type : 'column',
							name : '每日注册人数',
							data : data,
						};
						var objSpline = {
							type : 'spline',
							name : '每日注册人数走势',
							data : data,
							marker : {
								lineWidth : 2,
								lineColor : Highcharts.getOptions().colors[3],
								fillColor : 'white'
							}
						}

						series.push(objBar);
						series.push(objSpline);
						// 绘制用户行为的图表
						$('#new_register_user').highcharts({
							title : {
								text : '每日用户注册情况'
							},
							xAxis : {
								categories : categories
							},
							yAxis : {
								title : {
									text : '注册人数',
								}
							},
							series : series,
							tooltip : {
								crosshairs : [ true, true ]
							}
						});
					}
				});
			}
		} ],
		renderTo : tool_bar,
	});
</script>
</html>